<template>
	<view class="container">
		<u-navbar
			title="关于我们"
			:autoBack="true"
			fixed
			placeholder
		></u-navbar>
		
		<view class="content">
			<view class="logo-section">
				<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
				<view class="app-name">小程序名称</view>
				<view class="version">版本: 1.0.0</view>
			</view>
			
			<view class="info-section">
				<view class="info-item">
					<view class="title">公司简介</view>
					<view class="text">
						我们是一家专注于XXXX领域的企业，致力于为用户提供高质量的服务和产品。自成立以来，我们不断创新，力求为客户带来更好的体验。
					</view>
				</view>
				
				<view class="info-item">
					<view class="title">联系方式</view>
					<view class="contact-item">
						<text class="iconfont icon-phone"></text>
						<text class="contact-text">客服电话：400-123-4567</text>
					</view>
					<view class="contact-item">
						<text class="iconfont icon-email"></text>
						<text class="contact-text">邮箱：support@example.com</text>
					</view>
					<view class="contact-item">
						<text class="iconfont icon-location"></text>
						<text class="contact-text">地址：XX省XX市XX区XX街XX号</text>
					</view>
				</view>
				
				<view class="info-item">
					<view class="title">关注我们</view>
					<view class="social-links">
						<view class="social-item">
							<image class="qrcode" src="/static/qrcode-wechat.png" mode="aspectFit"></image>
							<text>官方微信</text>
						</view>
						<view class="social-item">
							<image class="qrcode" src="/static/qrcode-weibo.png" mode="aspectFit"></image>
							<text>官方微博</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="copyright">
				Copyright © 2024 公司名称 All Rights Reserved
			</view>
		</view>
	</view>
</template>

<script>
	import tools from '@/mixin/tools.js'
	
	export default {
		mixins: [tools],
		data() {
			return {
				
			}
		},
		onLoad() {
			console.log('关于我们页面加载')
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f8f8f8;
	}
	
	.content {
		padding: 20rpx;
	}
	
	.logo-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 0;
		
		.logo {
			width: 120rpx;
			height: 120rpx;
			margin-bottom: 20rpx;
		}
		
		.app-name {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}
		
		.version {
			font-size: 24rpx;
			color: #999;
		}
	}
	
	.info-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
		
		.info-item {
			margin-bottom: 40rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
				border-left: 8rpx solid #2979ff;
				padding-left: 20rpx;
			}
			
			.text {
				font-size: 28rpx;
				color: #666;
				line-height: 1.6;
			}
		}
	}
	
	.contact-item {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		
		.iconfont {
			font-size: 32rpx;
			color: #2979ff;
			margin-right: 15rpx;
		}
		
		.contact-text {
			font-size: 28rpx;
			color: #666;
		}
	}
	
	.social-links {
		display: flex;
		justify-content: space-around;
		
		.social-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.qrcode {
				width: 160rpx;
				height: 160rpx;
				margin-bottom: 10rpx;
				background-color: #eee;
			}
			
			text {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
	
	.copyright {
		text-align: center;
		font-size: 24rpx;
		color: #999;
		padding: 30rpx 0;
	}
</style> 